<template>
  <div style="margin: 20px auto;width: 95%">
    <el-table
      :data="tableData.filter(data => !search
        || data.username.toLowerCase().includes(search.toLowerCase())
        || data.realName.toLowerCase().includes(search.toLowerCase())
        || data.area.toLowerCase().includes(search.toLowerCase())
        || data.realName.toLowerCase().includes(search.toLowerCase())
      )"
      style="width: 100%"
    >
      <el-table-column
        label="序号"
        type="index"
        width="50"
      />
      <el-table-column
        label="用户名"
        prop="username"
      />
      <el-table-column
        prop="role"
        label="角色"
        width="100"
        :filters="[{ text: '管理员', value: 'ROLE_ADMIN' }, { text: '工作者', value: 'ROLE_WORKER' },{ text: '用户', value: 'ROLE_USER' }]"
        :filter-method="filterRole"
        filter-placement="bottom-end"
      >
        <template slot-scope="scope">
          <el-tag
            :type="scope.row.role === 'ROLE_ADMIN' ? 'danger':scope.row.role === 'ROLE_WORKER'? 'success' : 'primary'"
            disable-transitions
          >{{ scope.row.role === 'ROLE_ADMIN' ? '管理员':scope.row.role === 'ROLE_WORKER'? '工作者' : '用户' }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        label="真实姓名"
        prop="realName"
      />
      <el-table-column
        label="所在城市"
        prop="area"
      />
      <el-table-column
        prop="isHealth"
        label="身体状况"
        width="100"
        :filters="[{ text: '健康', value: true }, { text: '不健康', value: false }]"
        :filter-method="filterHealth"
        filter-placement="bottom-end"
      >
        <template slot-scope="scope">
          <el-tag
            :type="scope.row.isHealth === true ? 'success' : 'danger'"
            disable-transitions
          >{{ scope.row.isHealth===true?'健康':'不健康' }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        label="账号创建时间"
        prop="createdTime"
      />
      <el-table-column
        label="账号修改时间时间"
        prop="updatedTime"
      />
      <el-table-column
        label="关联的微信OpenId"
        prop="openId"
      />
      <el-table-column
        align="right"
      >

        <template slot="header" slot-scope="scope">
          <el-input
            v-model="search"
            size="mini"
            placeholder="搜索地点，真实姓名，用户名"
          />
          <p @click="downloadCsv"><i class="el-icon-edit" />导出excel</p>
        </template>
        <template slot-scope="scope">
          <el-button
            :disabled="true"
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
          >Delete</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>

</template>

<script>
import request from '@/utils/request'
import { Message } from 'element-ui'
export default {
  name: 'Index',
  data() {
    return {
      tableData: [],
      search: ''
    }
  },
  created() {
    const vm = this
    request({
      // url: 'https://localhost/record/person',
      url: 'https://www.laozhoy1.club/record/person',
      method: 'get'
    }).then(function(res) {
      const data = JSON.parse(res.message)
      console.log(data)
      vm.tableData = data
    })
  },
  methods: {
    downloadCsv() {
      request({
        // url: 'https://localhost/download/getpersoncsv',
        url: 'https://www.laozhoy1.club/download/getpersoncsv',
        method: 'get',
        responseType: 'blob'
      }).then(response => {
        alert('正在从服务端拉去信息')
        const content = response
        const blob = new Blob([content])
        const fileName = '人员信息.xlsx'
        if ('download' in document.createElement('a')) { // 非IE下载
          const elink = document.createElement('a')
          elink.download = fileName
          elink.style.display = 'none'
          elink.href = URL.createObjectURL(blob)
          document.body.appendChild(elink)
          elink.click()
          URL.revokeObjectURL(elink.href) // 释放URL 对象
          document.body.removeChild(elink)
        } else { // IE10+下载
          navigator.msSaveBlob(blob, fileName)
        }
      })
    },
    handleDelete(index, row) {
      console.log(row.id)
      request({
        url: 'https://www.laozhoy1.club/record/delperson',
        params: { 'id': row.id }
      }).then(function(res) {
        if (res.code === 20000) {
          Message({
            message: '删除成功',
            type: 'success',
            duration: 5 * 1000
          })
          // setTimeout(function() {
          //   window.location.reload()
          // }, 1000)
        }
      })

    },
    filterHealth(value, row) {
      return row.isHealth === value
    },
    filterRole(value, row) {
      return row.role === value
    }
  }
}
</script>

<style scoped>

</style>
